<template>
  <div>
    <div class="flex">
      <el-radio-group v-model="type" size="large" @change="pieChange">
        <el-radio-button label="sale_">销量</el-radio-button>
        <el-radio-button label="_money">销售额</el-radio-button>
      </el-radio-group>

      <el-select v-model="day" class="m-2" placeholder="Select" size="large" @change="pieChange">
        <el-option label="昨天" value="yesterday" />
        <el-option label="今天" value="today" />
        <el-option label="前3天" value="three_days" />
        <el-option label="前7天" value="seven_days" />
        <el-option label="前14天" value="fourteen_days" />
        <el-option label="前1个月" value="thirty_days" />
        <el-option label="前2个月" value="sixty_days" />
      </el-select>
    </div>
    <div class="pie" id="pie" style="height: 400px; border-bottom: 1px solid #ccc"></div>
    <div class="map" id="map" style="height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption;
type dayEmnu =
  | "yesterday"
  | "today"
  | "three_days"
  | "thirty_days"
  | "sixty_days"
  | "seven_days"
  | "fourteen_days";
// 销量和销售额的radio数据
// 数据类型，只有两个 sale_ 或者 _money
const type = ref<"sale_" | "_money">("sale_");
// 天数， 和昨天,今天,前3天...
const day = ref<dayEmnu>("yesterday");

// 多个地方需要访问的数据，写到顶层
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
var option: EChartsOption;
var myChart: echarts.ECharts;

const pieChange = () => {
  // 把type和day拼接成 对应的数据的属性名
  const key =
    type.value === "sale_" ? type.value + day.value : day.value + type.value;
  // 取出对应的数据，重新设置给饼图
  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  // 更新视图
  // echarts实例.setOption会重新触发绘制
  (option.series as echarts.SeriesOption[])[0].data = data;
  myChart.setOption(option);
};

const drawMap = () => {
  /*
    地图的使用步骤：
      1. 准备一个有高度的div
      2. 引入一个 json 文件 ， 来自 https://datav.aliyun.com/portal/school/atlas/area_selector 网站
      3. 注册地图json数据
      4. 初始化 echarts 实例
      5. setOption({
        series ： {
          type: 'map',
          map : '上面注册的地图数据的名称'
        }
      })
  */
  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  // 地图比较特殊，需要先注册json数据
  echarts.registerMap("china", china as any);
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  mapChart.setOption({
    title: {
      text: "全国销量分布图",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>销量 ：{c}",
      backgroundColor: "rgba(0,0,0,.6)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 1000000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: [
          "lightskyblue",
          "yellow",
          "orangered",
          "purple",
          "hotpink",
          "skyblue",
        ],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        data,
        zoom: 1.2,
        emphasis: {
          label: {
            // 控制高亮状态下的文本不显示
            show: false,
          },
        },
      },
    ],
    // 注意：返回的数据一定要和 josn里面的name要一致，不然无法识别
    // nameMap: {
    //   北京市: "北京",
    // },
  });
};

onMounted(() => {
  var chartDom = document.getElementById("pie")!;
  myChart = echarts.init(chartDom);
  statApi().then((res) => {
    pieData = res.data.salePie;
    mapData = res.data.saleMap;
    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.sale_yesterday, // 默认展示是 昨天的销量
    }));
    option = {
      // 提示组件，通常就是 鼠标移入的提示信息
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}:{c}({d}%)",
      },
      legend: {
        orient: "vertical",
        height: 100,
        right: "20%",
      },
      series: [
        {
          type: "pie",
          label: {
            color: "inherit",
          },
          radius: ["40%", "70%"],
          data,
          left: "-30%",
        },
      ],
    };
    option && myChart.setOption(option);

    // 绘制地图
    drawMap();
  });
});
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
</style>
